<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线教育考试平台</title>
    <link rel="stylesheet" href="../utils/bootstrap.css" />
    <link rel="stylesheet" href="../style/base.css" />
    <link rel="stylesheet" href="../basestyle/left-menu.css" />
    <script src="../utils/jquery-3.6.4.js"></script>
    <script src="../utils/bootstrap.js"></script>
  </head>

  <body>
    <div class="container-fluid home">
      <!-- 头部部分 -->
      <header class="clearfix">
        <h1>在线教育考试平台</h1>
        <span class="glyphicon glyphicon-arrow-left z-left"></span>
        <div class="zlj-right">
          <span class="glyphicon glyphicon-search"></span>
          <span class="glyphicon glyphicon-bell"></span>
          <input type="file" id="file" />
          <img src="../images/6.jpg" alt="" class="show-img" />
          <span class="yonghu">admin</span>
          <span class="glyphicon glyphicon-off"></span>
        </div>
      </header>
      <section>
        <!-- 左侧菜单栏 -->
        <nav>
          <ul class="tz-left-ul clearfix zljshouye">
            <li class="tz-second-li">
              <span
                class="glyphicon glyphicon-home tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>首页</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <div class="tz-second-menu-div zlj-shouye1" data-id="0"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-align-justify tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>题库管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye21">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye21"
                    >题目分类</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye22">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye22"
                    >题目列表</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="2"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-list-alt tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>试卷管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye31">
                  <span
                    data-id="13"
                    data-href="#"
                    class="zlj-shouye31 tz-left-margin"
                    >试卷分类
                  </span>
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye32">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye32"
                    >试卷列表</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="2"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-calendar tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>考务管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye41">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye41"
                    >准考证
                  </span>
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye42">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye42"
                    >签到表</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye43">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye43"
                    >桌贴</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye44">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye44"
                    >门贴</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="4"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-book tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>考试管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye51">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye51"
                    >考试列表
                  </span>
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye52">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye52"
                    >考试审批</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye53">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye53"
                    >考试监控</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="3"></div>
            </li>
            <li class="tz-second-li">
              <span
                class="glyphicon glyphicon-education tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>考生管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <div class="tz-second-menu-div zlj-shouye61" data-id="0"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-sort-by-attributes-alt tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>统计分析</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye71">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye71"
                    >考试分析
                  </span>
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye72">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye72"
                    >试卷分析</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="2"></div>
            </li>
            <li class="tz-second-li">
              <span
                class="glyphicon glyphicon-tower tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>证书管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <div class="tz-second-menu-div zlj-shouye81" data-id="0"></div>
            </li>
            <li class="tz-second-li tz-ul-hidden">
              <span
                class="glyphicon glyphicon-cog tz-left-margin"
                aria-hidden="true"
              ></span>
              <span>系统管理</span>
              <span
                class="glyphicon glyphicon-menu-down tz-floatright"
                aria-hidden="true"
              ></span>
              <ul class="tz-left-ul">
                <li data-id="12" data-href="#" class="zlj-shouye91">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye91"
                    >角色权限
                  </span>
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye92">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye92"
                    >短信设置</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye93">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye93"
                    >安全设置</span
                  >
                </li>
                <li data-id="12" data-href="#" class="zlj-shouye94">
                  <span
                    data-id="13"
                    data-href="#"
                    class="tz-left-margin zlj-shouye94"
                    >系统日志</span
                  >
                </li>
              </ul>
              <div class="tz-second-menu-div" data-id="4"></div>
            </li>
          </ul>
        </nav>
        <main>
          <!-- 主面的头部 -->
          <div class="zz-main-div1">
            <div class="zz-main-span">
              <span class="zz-span-color">系统管理</span>
              <span>/</span>
              <span>角色权限</span>
            </div>
            <h2>角色权限</h2>
          </div>
          <!-- 输入框列表部分 -->
          <div class="lwy-main-sect">
            <div class="zz-table-top clearfix row">
              <!-- 左侧小菜单、搜索 -->
              <div class="col-lg-6 zz-table-input clearfix col-xs-6 col-md-1">
                <div class="input-group">
                  <input
                    type="text"
                    class="form-control z-search-con"
                    placeholder="请输入名字"
                  />
                  <span class="input-group-btn">
                    <button class="btn btn-default z-search-btn" type="button">
                      <span
                        class="glyphicon glyphicon-search"
                        aria-hidden="true"
                      ></span>
                    </button>
                  </span>
                </div>
                <!-- /input-group -->
                <div
                  class="panel-group"
                  id="accordion"
                  role="tablist"
                  aria-multiselectable="true"
                >
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                      <h4 class="panel-title">
                        <a
                          role="button"
                          data-toggle="collapse"
                          data-parent="#accordion"
                          href="#collapseOne"
                          aria-expanded="true"
                          aria-controls="collapseOne"
                        >
                          超级管理员
                        </a>
                      </h4>
                    </div>
                    <div
                      id="collapseOne"
                      class="panel-collapse collapse"
                      role="tabpanel"
                      aria-labelledby="headingOne"
                    >
                      <div class="panel-body">张三</div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                      <h4 class="panel-title">
                        <a
                          class="collapsed"
                          role="button"
                          data-toggle="collapse"
                          data-parent="#accordion"
                          href="#collapseTwo"
                          aria-expanded="false"
                          aria-controls="collapseTwo"
                        >
                          一般管理员
                        </a>
                      </h4>
                    </div>
                    <div
                      id="collapseTwo"
                      class="panel-collapse collapse"
                      role="tabpanel"
                      aria-labelledby="headingTwo"
                    >
                      <div class="panel-body">李四</div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                      <h4 class="panel-title">
                        <a
                          class="collapsed"
                          role="button"
                          data-toggle="collapse"
                          data-parent="#accordion"
                          href="#collapseThree"
                          aria-expanded="false"
                          aria-controls="collapseThree"
                        >
                          运维人员
                        </a>
                      </h4>
                    </div>
                    <div
                      id="collapseThree"
                      class="panel-collapse collapse"
                      role="tabpanel"
                      aria-labelledby="headingThree"
                    >
                      <div class="panel-body">王五</div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFour">
                      <h4 class="panel-title">
                        <a
                          class="collapsed"
                          role="button"
                          data-toggle="collapse"
                          data-parent="#accordion"
                          href="#collapseFour"
                          aria-expanded="false"
                          aria-controls="collapseFour"
                        >
                          收费员
                        </a>
                      </h4>
                    </div>
                    <div
                      id="collapseFour"
                      class="panel-collapse collapse"
                      role="tabpanel"
                      aria-labelledby="headingFour"
                    >
                      <div class="panel-body">钱六</div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFive">
                      <h4 class="panel-title">
                        <a
                          class="collapsed"
                          role="button"
                          data-toggle="collapse"
                          data-parent="#accordion"
                          href="#collapseFive"
                          aria-expanded="false"
                          aria-controls="collapseFive"
                        >
                          测试权限
                        </a>
                      </h4>
                    </div>
                    <div
                      id="collapseFive"
                      class="panel-collapse collapse"
                      role="tabpanel"
                      aria-labelledby="headingFive"
                    >
                      <div class="panel-body">孙齐</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.col-lg-6 -->
              <div>
                <div class="zz-div-button">
                  <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#myModal"
                  >
                    + 新建角色
                  </button>
                  <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#myModalfigure"
                  >
                    + 新建人员
                  </button>
                </div>
                <!-- 新建角色弹框 -->
                <div
                  class="modal fade"
                  id="myModal"
                  tabindex="-1"
                  role="dialog"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                        >
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="form-group">
                          <label for="exampleInputName5">角色名称：</label>
                          <input
                            type="text"
                            class="form-control"
                            id="exampleInputName5"
                            placeholder="停车场管理员"
                          />
                        </div>
                      </div>
                      <div class="modal-body">
                        <h5 style="font-weight: 600">角色权限</h5>
                        <!-- 车辆管理 -->
                        <div class="row">
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 车辆管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 车辆管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                        </div>
                        <!-- 系统管理 -->
                        <div class="row">
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 系统管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 系统管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                        </div>
                        <!-- 财务管理 -->
                        <div class="row">
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 财务管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                          <div class="col-md-6">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox" checked /> 财务管理
                              </label>
                            </div>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox1"
                                value="option1"
                              />
                              1
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox2"
                                value="option2"
                              />
                              2
                            </label>
                            <label class="checkbox-inline">
                              <input
                                type="checkbox"
                                id="inlineCheckbox3"
                                value="option3"
                              />
                              3
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          更新信息
                        </button>
                        <button
                          type="button"
                          class="btn btn-primary"
                          data-toggle="modal"
                          data-target="#myModalfigure"
                          data-dismiss="modal"
                        >
                          添加人员
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 新建人员弹框 -->
                <div
                  class="modal fade"
                  id="myModalfigure"
                  tabindex="-1"
                  role="dialog"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-body">
                        <div class="row">
                          <div class="col-md-6">
                            <label for="exampleInputName2">人员姓名：</label>
                            <input
                              type="text"
                              class="form-control z-add-name"
                              id="exampleInputName2"
                              placeholder="请输入"
                            />
                          </div>
                          <div class="col-md-6">
                            <label for="exampleInputName3">手机号码：</label>
                            <input
                              type="tel"
                              class="form-control z-add-tel"
                              id="exampleInputName3"
                              placeholder="请输入"
                            />
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6">
                            <label for="exampleInputName4">电子邮箱：</label>
                            <input
                              type="email"
                              class="form-control z-add-email"
                              id="exampleInputName4"
                              placeholder="请输入"
                            />
                          </div>
                          <div class="col-md-6">
                            <label for="exampleInputName2">所属角色：</label>
                            <select class="form-control zz-add-opt">
                              <option>请选择</option>
                              <option>超级管理员</option>
                              <option>一般管理员</option>
                              <option>运维人员</option>
                              <option>收费员</option>
                              <option>测试权限</option>
                            </select>
                            <div class="col-md-10">
                              <label for="exampleInputName3">时间：</label>
                              <input
                                type="datetime-local"
                                class="form-control z-add-time"
                                id="exampleInputName3"
                                placeholder="请输入"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-primary z-add-btn"
                          data-dismiss="modal"
                        >
                          完成添加
                        </button>
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          取消
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 表格 -->
                <div class="col-xs-12 col-md-9">
                  <table class="table table-hover table-condensed zz-div-table">
                    <thead>
                      <tr>
                        <th>序号</th>
                        <th>人员姓名</th>
                        <th>所属角色</th>
                        <th>手机号</th>
                        <th>电子邮箱</th>
                        <th>最近登录时间</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <!-- <tr>
                      <td>1</td>
                      <td>张三</td>
                      <td>超级管理员</td>
                      <td>139****4321</td>
                      <td>ant**@**eo.com</td>
                      <td>2019-12-12 12:12:12</td>
                      <td><a data-toggle="modal" data-target="#delModal"> 删除&nbsp;</a><a data-toggle="modal"
                          data-target="#editModal">&nbsp;修改</a></td>
                    </tr> -->
                    </tbody>
                  </table>
                </div>
                <!-- 修改弹框 -->
                <div
                  class="modal fade"
                  id="editModal"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-body">
                        <form>
                          <div class="form-group">
                            <label for="exampleInputEmail1">人员姓名</label>
                            <input
                              type="text"
                              class="form-control zz-edit-name"
                              id="exampleInputEmail1"
                              placeholder="姓名"
                            />
                          </div>
                          <div class="form-group">
                            <label for="exampleInputEmail1">所属角色</label>
                            <select
                              class="form-control zz-edit-opt edit-class"
                              value="前端"
                            >
                              <option value="" selected hidden>请选择</option>
                              <option value="超级管理员">超级管理员</option>
                              <option value="一般管理员">一般管理员</option>
                              <option value="运维人员">运维人员</option>
                              <option value="收费员">收费员</option>
                              <option value="测试权限">测试权限</option>
                            </select>
                            <label for="exampleInputName2">手机号码：</label>
                            <input
                              type="tel"
                              class="form-control zz-edit-tel"
                              id="exampleInputName2"
                              placeholder="请输入"
                            />
                            <label for="exampleInputName2">电子邮箱：</label>
                            <input
                              type="email"
                              class="form-control zz-edit-email"
                              id="exampleInputName2"
                              placeholder="请输入"
                            />
                            <label for="exampleInputName8">时间：</label>
                            <input
                              type="datetime-local"
                              class="form-control z-edit-time"
                              id="exampleInputName8"
                              placeholder="请输入"
                            />
                          </div>
                        </form>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          取消
                        </button>
                        <button
                          data-dismiss="modal"
                          type="button"
                          class="btn btn-primary zz-save-btn"
                        >
                          保存
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 删除弹框 -->
                <div
                  class="modal fade"
                  id="delModal"
                  tabindex="-1"
                  role="dialog"
                  aria-labelledby="myModalLabel"
                >
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-body">您确定删除吗？</div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >
                          取消
                        </button>
                        <button
                          type="button"
                          data-dismiss="modal"
                          class="btn del-btn btn-primary z-dele-btn"
                        >
                          确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.row -->
          </div>
        </main>
      </section>
    </div>
    <link rel="stylesheet" href="../style/system-figure.css" />
    <script src="../basestyle/left-menu.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/system-figure.js"></script>
  </body>
</html>
